<template>
  <q-card class="props-area q-pa-sm fit overflow-auto no-padding">
    <div class="panel-header text-subtitle2 text-blue-grey-9" style="padding: 5px 15px;">样式面板 {{ currentNode.type }}</div>
    <!-- 事件面板 -->
    <q-scroll-area class="panel-body">
      <q-list class="q-pa-md" separator>
        <q-expansion-item icon="style" default-opened header-class="text-blue-grey" label="样式类" caption="classes">
          <div class="row">
            <q-chip icon="data_object" removable dense color="primary" text-color="white" square v-for="(c,key) in dataScope.class || {}"
                    style="padding: 2px 8px;"
                    @remove="delete dataScope.class[key]">{{ key }}
            </q-chip>
          </div>
          <q-input dense filled v-model="className" @keydown.enter="addClass" placeholder="输入类名，回车添加"></q-input>
        </q-expansion-item>
        <q-expansion-item icon="style" default-opened header-class="text-blue-grey" label="行内样式" caption="inline-style">
          <q-card class="q-pa-sm" style="border-radius: 5px; height: 200px;width: 100%;" dark>
            <CodeEditor ref="codeEditor" v-model="cssString" lang="css" regex="^element\.style\{(.*)\}$"></CodeEditor>
          </q-card>
        </q-expansion-item>
      </q-list>
    </q-scroll-area>
  </q-card>
</template>

<script setup>
import CodeEditor from '../components/CodeEditor/index.vue'
import {onBeforeMount, ref, watch} from 'vue';
import {RW} from 'dlsjs';
import {getProperty} from "../common/getConfig.js"
import {
  cssStringToVueStyleObject,
  removeSpacesAndNewlines,
  vueStyleObjectToCssString
} from "../common/util.js"

const props = defineProps({
  currentNode: {
    type: Object,
    default: () => ({})
  },
  dataScope: {
    type: Object,
    default: () => ({})
  }
})
const option = RW(props.dataScope)
const config = ref({})
const cssString = ref('')
const className = ref('')

function addClass() {
  if(!className.value) return
  if (!props.dataScope.class) props.dataScope.class = {}
  className.value = className.value.trim()
  props.dataScope.class[className.value] = true
  className.value = ''
}

watch(() => props.currentNode.type, async () => {
  config.value = await getProperty()[props.currentNode.type]
  cssString.value = 'element.style {\n' + vueStyleObjectToCssString(props.dataScope?.style || '') + '\n}'
})

onBeforeMount(async () => {
  config.value = await getProperty()[props.currentNode.type]
  cssString.value = 'element.style {\n' + vueStyleObjectToCssString(props.dataScope?.style || '') + '\n}'
})

watch(cssString, () => {
  let str = removeSpacesAndNewlines(cssString.value)
  const regRes = /^element\.style\{(.*)\}$/.exec(str)
  props.dataScope.style = cssStringToVueStyleObject(regRes[1])
})
</script>

<style scoped lang="scss">
.prop-item:hover {
  background-color: $blue-1;
}

.panel-header {
  height: 32px;
  border-bottom: 1px solid #e5e5e5;
}

.panel-body {
  height: calc(100% - 32px);
}
</style>
